
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}

			.mui-btn {
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<!--节点-->
				<div id="slider" class="mui-slider" style="height:30%;">
					<div class="mui-slider-group mui-slider-loop" >
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="page1.html">
								<img src="./images/yuantiao.jpg">
								<p class="mui-slider-title">静静看这世界</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/shuijiao.jpg">
								<p class="mui-slider-title">幸福就是可以一起睡觉</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/muwu.jpg">
								<p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/cbd.jpg">
								<p class="mui-slider-title">Color of SIP CBD</p>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="#">
								<img src="./images/yuantiao.jpg">
								<p class="mui-slider-title">静静看这世界</p>
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="./images/shuijiao.jpg">
								<p class="mui-slider-title">幸福就是可以一起睡觉</p>
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator mui-text-right">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<div id="Gallery" class="mui-slider" style="margin-top:15px;">
					<div class="mui-slider-group" style="height:14%;">
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view mui-grid-9">
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="page1.html">
										<span class="mui-icon mui-icon-home"></span>
										<div class="mui-media-body">图片</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="setting.html">
										<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
										<div class="mui-media-body">文档</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-chatbubble"></span>
										<div class="mui-media-body">视频</div>
									</a>
								</li>
							</ul>
						</div>
						<div class="mui-slider-item">
							<ul class="mui-table-view mui-grid-view mui-grid-9">
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-home"></span>
										<div class="mui-media-body">图片</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
										<div class="mui-media-body">文档</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									<a href="#">
										<span class="mui-icon mui-icon-chatbubble"></span>
										<div class="mui-media-body">视频</div>
									</a>
								</li>
							</ul>
						</div>

					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<div class="mui-content" style="background-color:#fff">
					<h5 style="background-color:#efeff4">慢生活</h5>
					<ul class="mui-table-view mui-grid-view">
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="./images/shuijiao.jpg">
								<div class="mui-media-body">幸福就是可以一起睡觉</div>
							</a></li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="./images/muwu.jpg">
								<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
							</a></li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#"><img class="mui-media-object" src="./images/cbd.jpg">
								<div class="mui-media-body">Color of SIP CBD</div>
							</a></li>
						<li class="mui-table-view-cell mui-media mui-col-xs-6">
							<a href="#">
								<img class="mui-media-object" src="./images/yuantiao.jpg">
								<div class="mui-media-body">静静看这世界</div>
							</a></li>
					</ul>
				</div>
				<ul class="mui-table-view" id="app_main_massage">
					<li class="mui-table-view-cell mui-media">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="./images/shuijiao.jpg">
							<div class="mui-media-body">
								幸福
								<p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
							</div>
						</a>
					</li>
					
				</ul>
				<!--节点-->
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第2个子页面，该页面展示一个消息列表</div>

				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 6</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 7</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 8</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 9</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 10</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 11</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 12</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 13</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 14</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 15</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 16</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 17</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 18</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 19</a></li>
					<li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 20</a></li>
				</ul>

			</div>
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第3个子页面，该页面展示一个通讯录示例.</div>
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="./images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">叶文洁</h4>
										<span class="oa-contact-position mui-h6">董事长</span>
									</div>
									<p class="oa-contact-email mui-h6">
										yewenjie@sina.com
									</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="./images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">艾AA</h4>
										<span class="oa-contact-position mui-h6">总经理</span>
									</div>
									<p class="oa-contact-email mui-h6">
										aaa@163.com
									</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="./images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">罗辑</h4>
										<span class="oa-contact-position mui-h6">员工</span>
									</div>
									<p class="oa-contact-email mui-h6">
										luoji@126.com
									</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="./images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">云天明</h4>
										<span class="oa-contact-position mui-h6">员工</span>
									</div>
									<p class="oa-contact-email mui-h6">
										ytm@163.com
									</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="./images/60x60.gif" />
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">史强</h4>
										<span class="oa-contact-position mui-h6">员工</span>
									</div>
									<p class="oa-contact-email mui-h6">
										shiqiang@gmail.com
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div id="tabbar-with-map" class="mui-control-content">
				<div class="title">这是div模式选项卡中的第4个子页面，该页面展示一个常见的设置示例.</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							新消息通知
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							隐私
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							通用
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							关于mui
						</a>
					</li>
				</ul>
				<ul class="mui-table-view" style="margin-top: 25px;">
					<li class="mui-table-view-cell">
						<a style="text-align: center;color: #FF3B30;">
							退出登录
						</a>
					</li>
				</ul>
			</div>



			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item mui-active" href="#tabbar">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item" href="#tabbar-with-chat">
					<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
					<span class="mui-tab-label">活动</span>
				</a>
				<a class="mui-tab-item" href="#tabbar-with-contact">
					<span class="mui-icon mui-icon-contact"></span>
					<span class="mui-tab-label">消息</span>
				</a>
				<a class="mui-tab-item" href="#tabbar-with-map">
					<span class="mui-icon mui-icon-gear"></span>
					<span class="mui-tab-label">设置</span>
				</a>
			</nav>







		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>

		<script>
			(function($, doc) {
				$.init();
				var settings = app.getSettings();
				var account = doc.getElementById('account');
				//
				window.addEventListener('show', function() {
					var state = app.getState();
					account.innerText = state.account;
				}, false);
				$.plusReady(function() {
					var settingPage = $.preload({
						"id": 'setting',
						"url": 'setting.html'
					});
					//设置
					var settingButton = doc.getElementById('setting');
					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
					settingButton.addEventListener('tap', function(event) {
						$.openWindow({
							id: 'setting',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					});
					//--
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
			
			
			
			
			
			mui.ajax('http://localhost:8080/jeecg-boot//cloud_disk/appcontroller/app',{
// 				data:{
// 					
// 				},
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(res){
					console.log(res);
					var html="";
					for (var i = 0; i < res.result.length; i++) {
						html+='<li class="mui-table-view-cell mui-media"><a href="page3.html?id='+res.result[i].id+'"><img class="mui-media-object mui-pull-left" src="./images/shuijiao.jpg"><div class="mui-media-body">'+res.result[i].fileName+'<p class="mui-ellipsis">'+res.result[i].updateTime+'</p></div></a></li>';
					};
					app_main_massage.innerHTML=html
				},
				error:function(xhr,type,errorThrown){
					
				}
			});
			
			
			
			
			
		</script>
	</body>

</html>
